<template>
  <div style="border-bottom:1px solid #eee">
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <div class="panel-container">
      <van-row type="flex" align="center">
        <van-col span="12"><span style="font-size:16px;font-weight:bold;color: rgba(0, 0, 0, .85);">{{alldata.condition + alldata.stitle}}</span></van-col>
        <van-col @click="setvalue(index, alldata)" span="12" style="text-align:right">
          {{showtitle}}<van-icon name="arrow" />
        </van-col>
      </van-row>
      <van-row type="flex" align="center">
        <van-col span="12">
          <div class="echart-box" ref="chart"></div>
        </van-col>
        <van-col span="12">
          <div v-for="(coldata, index) in alldata.completedata" v-show="index !== 2" :key="index" style="line-height:30px">
            <span style="font-size:14px;margin-right:5px">{{ coldata[0] }}:</span>
            <span style="font-size:14px">{{ coldata[1] }} </span>
            <span style="font-size:14px">{{ coldata[2] }}</span>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- <van-cell is-link :title="alldata.condition + alldata.stitle" @click="setvalue(index, alldata)" />
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
        <van-circle style="margin-left:30vw" size="130px" v-model.number="alldata.completedata[2][3]" :rate="alldata.completedata[2][1]" :clockwise="false" layer-color="rgb(245, 245, 245)">
            <template #default>
                <span style="color:rgb(110, 110, 110)" v-html="'<br><br>' + alldata.completedata[2][0] + '<br>'"></span>
                <span style="font-size:20px" v-html="alldata.completedata[2][1] + '%'"></span>
            </template>
        </van-circle>
        <van-row style="margin-top:7px" @click="showComplete(alldata)">
            <van-col v-for="(coldata, index) in alldata.completedata" v-show="index !== 2" :key="index" class="itemcol" span="12">
                <span style="font-size:12px">{{ coldata[0] }}</span><br>
                <span style="color:green;font-size:20px">{{ coldata[1] }}</span>
                <span style="color:green;font-size:12px">{{ coldata[2] }}</span>
            </van-col>
        </van-row>
        <van-button type="default" block @click="showComplete(alldata)">查看明细</van-button> -->
  </div>
</template>
<script>
import * as echarts from 'echarts'
import Vue from 'vue'
import qs from 'qs'
import { TreeSelect, Grid, GridItem, Toast, Popup, Tabbar, TabbarItem, Swipe, SwipeItem, Col, Row, DropdownMenu, DropdownItem, NoticeBar, ActionSheet, Cell, CellGroup, Circle, Button, Tab, Tabs, Icon, Sticky, DatetimePicker } from 'vant'
import commonTitleMixin from '../mixins/commonTitleMixin'
Vue.use(Icon).use(Sticky).use(DatetimePicker).use(TreeSelect).use(Grid).use(GridItem).use(Toast).use(Popup).use(Tabbar).use(TabbarItem).use(Swipe).use(SwipeItem).use(Col).use(Row).use(DropdownMenu).use(DropdownItem).use(NoticeBar).use(ActionSheet).use(Cell).use(CellGroup).use(Circle).use(Button).use(Tabs).use(Tab)
export default {
  name: 'diamond',
  data: function () {
    return {
      showtitle: '',
      show: false,
      tempindex: 0,
      itemid: '',
      itemname: '',
      actions: [
        { name: '本年', value: 'myyear' },
        { name: '上年', value: 'mypreyear' },
        { name: '本季度', value: 'myquarter' },
        { name: '上季度', value: 'myprequarter' },
        { name: '本月', value: 'mymonth' },
        { name: '上月', value: 'mypremonth' },
        { name: '本周', value: 'myweek' },
        { name: '上周', value: 'mypreweek' },
        { name: '本日', value: 'myday' },
        { name: '上日', value: 'mypreday' }
      ]
    }
  },
  props: ['alldata', 'index'],
  mixins: [commonTitleMixin],
  mounted () {
    // //console.log('complete', this.alldata)
    this.initChart(this.alldata.completedata[2][1])
  },
  methods: {
    initChart (value) {
      value = (Math.random(0, 1) * 100).toFixed(0)

      let chartDom = this.$refs.chart

      let myChart = echarts.init(chartDom)

      const options = {
        title: {
          text: `${value}%`, // 圆环中间数字
          textStyle: {
            color: '#222222',
            fontSize: 20
          },
          subtext: '',
          subtextStyle: {
            color: '#222222'
          },
          itemGap: 10,
          left: 'center',
          top: 'center'
        },
        angleAxis: {
          max: 100, // 总数
          clockwise: true, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '100%' // 图形大小
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                name: '交易结果成功数',
                value: value,
                itemStyle: {
                  normal: {
                    color: '#409EFF'
                    // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ // 渐变色，如果正常一个颜色的话，直接写 color：色值；
                    //   {
                    //     offset: 0,
                    //     color: '#0091ff',
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: '#cfe8fc',
                    //   },
                    // ]),
                  }
                }
              }
            ],
            coordinateSystem: 'polar',
            roundCap: false,
            barWidth: 12,
            barGap: '-100%',
            z: 2
          },
          {
            // 底色环
            type: 'bar',
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#e4e4e4'
                }
              }
            ],
            coordinateSystem: 'polar',
            roundCap: false,
            barWidth: 12,
            barGap: '-100%',
            z: 1
          }
        ]
      }
      myChart.setOption(options)
    },

    onSelect (item) {
      this.show = false
      this.showtitle = item.name
      this.getdata(item.value, item.name)
    },
    showComplete (item) {
      this.$router.push({ name: 'showcomplete', query: { item: this.alldata, currentdep: this.depvalue } })
    },
    setvalue (index, item) {
      this.show = true
      this.tempindex = index
      this.itemid = item.itemid
      this.itemname = item.sname
    },
    getdata (value, name) {
      let data = { itemid: this.itemid, condition: value, currentdep: this.depvalue }
      //console.log(data)
      let url = '/api/extractdata.getdata.do'
      if (this.itemname === 'complete') {
        url = '/api/completedata.getcompletedata.do'
      } else if (this.itemname === 'twobarandline') {
        url = '/api/homepage.gettwobarandline.do'
      } else if (this.itemname === 'provinceproduct') {
        url = '/api/homepage.getprovinceproduct.do'
      }
      this.axios({
        method: 'post',
        url: url,
        data: qs.stringify(data)
      }).then(res => {
        let alldata = this.alldata
        //console.log('alldata' + alldata)
        //console.log('alldata[0]' + alldata[0])
        //console.log('alldata[1]' + alldata[1])
        for (let i = 0; i < alldata.length; i++) {
          if (alldata[i].itemid === this.itemid) {
            if (this.itemname === 'complete') {
              this.alldata[i].completedata = res.data
            } else if (this.itemname === 'twobarandline') {
              this.alldata[i].xja = res.data.xja
              this.alldata[i].bararr1 = res.data.bararr1
              this.alldata[i].bararr2 = res.data.bararr2
              this.alldata[i].line = res.data.line
              this.alldata[i].title = res.data.title
            } else if (this.itemname === 'provinceproduct') {
              //console.log(this.adddata)
              this.alldata[i].xja2 = res.data.xja2
              this.alldata[i].xja1 = res.data.xja1
              this.alldata[i].bararr1 = res.data.bararr1
              this.alldata[i].bararr2 = res.data.bararr2
              this.alldata[i].line = res.data.line
              this.alldata[i].title = res.data.title
            } else {
              this.alldata[i].arrdata = res.data
            }
            this.alldata[i].condition = name
          }
        }
      }).catch(res => {
        this.reserror(res)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.panel-container {
  box-sizing: border-box;
  padding: 10px 5px;
  //   background: #000;
}

.echart-box {
  width: 200px;
  height: 150px;
  //   border: 3px solid pink;
  //   margin: 20px auto;
}
</style>
